import React, { Component } from "react";
import styles from "./Home.module.scss";
import SearchInput from "../Search/SearchInput";
import { getHomeSwiperList, getHomeCatItems, getHomePicList } from "../../utils/dataApi";
import { withRouter } from "react-router-dom";
/* 1. 引入轮播图组件 */
import { Carousel } from "antd-mobile";
import {connect} from "react-redux"

class Home extends Component {
  state = {
    swiperList: [], // 首页轮播图的数据
    catItems: [], //首页导航数据
    picList: [], // 图片列表
  };

  async componentDidMount() {
    let swiperList = await getHomeSwiperList();
    let catItems = await getHomeCatItems();
    let picList = await getHomePicList();
    // console.log(swiperList);
    this.setState({
      swiperList: swiperList.message,
      catItems: catItems.message,
      picList: picList.message,
    });
  }

  // 跳转到商品详情页面
  goToGoodDetail = (goods_id) => {
    this.props.history.push("goodsDetail/" + goods_id);
  };

  // 跳转到分类页面
  goToCategory = () => {
    this.props.history.push("category");
  };

  // 跳转到产品列表
  goToProductList = () => {
    this.props.history.push("goodsList?query=" + "服装");
  };

  render() {
    return (
      <div className={styles.ykHome}>
        {/* 首页标题 */}
        <div className={styles.ykHomeTitle}>
          <span className={styles.title}>{this.props.title}</span>
        </div>

        {/* 首页搜索框 */}
        <SearchInput></SearchInput>

        {/* 轮播图组件 */}
        <div className="yhHomeSwiper">
          <Carousel autoplay={true} infinite>
            {this.state.swiperList.map((val) => (
              <img
                onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                key={val.goods_id}
                src={val.image_src}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            ))}
          </Carousel>
        </div>

        {/* 首页分类图标 */}
        <div className={styles.ykHomeCat}>
          {this.state.catItems.map((v, i) => {
            return (
              <div onClick={this.goToCategory} className={styles.homeCatItem} key={v.image_src}>
                <img src={v.image_src} alt="" />
              </div>
            );
          })}
        </div>

        {/* 首页的图片列表 */}
        <div className={styles.ykHomeList}>
          {this.state.picList.map((v, i) => {
            return (
              <div className={styles.homeListItem} key={v.floor_title.image_src}>
                {/* 标题 */}
                <div className={styles.listItemTitle}>
                  <img src={v.floor_title.image_src} alt="" />
                </div>

                {/* 图片列表 */}
                <div className={styles.listItemPics}>
                  {v.product_list.map((vv, i) => {
                    return (
                      <div
                        className={styles.picItem}
                        key={vv.image_src}
                        onClick={this.goToProductList}
                      >
                        <img src={vv.image_src} alt="" />
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state)=>{
  return {
    title:state.homeReducer.title
  }
}

export default connect(mapStateToProps,null)(withRouter(Home));
